<template>
  <div class="OnlineDevelopmentModeDetails">
    <div class="tips">
      <div :class="fontsClass">{{ tips }}</div>
    </div>
  </div>
</template>

<script>
import axios from "axios"

const configJson = require("../../../pluginTemp/config.json")
const information = require("../../../scripts/information.json")
const ipAdress = information.ipAdress
export default {
  name: "OnlineDevelopmentModeDetails",
  components: {},
  data() {
    return {
      tips: "",
      fontsClass: "normal"
    }
  },
  props: {},
  mounted() {
    let port = window.location.port
    if (!configJson["online-development-mode"].host) {
      this.fontsClass = "error"
      this.tips = "主机名不存在，请检查host字段"
      return
    }
    if (!configJson["online-development-mode"].port) {
      this.fontsClass = "error"
      this.tips = "端口号不存在，请检查port字段"
      return
    }
    if (!configJson["online-development-mode"].entry) {
      this.fontsClass = "error"
      this.tips = "入口文件不存在，请检查entry字段"
      return
    }
    if (configJson["online-development-mode"].port !== port) {
      this.tips = "config.json中端口号与当前启动不一致，请确保线上调试包端口正确，否则请修改port字段并重新打包上传"
      this.fontsClass = "warning"
      return
    }
    let host = ["http://localhost", "http://0.0.0.0", `http://${ipAdress}`]
    let hostFlag = 0
    const getEntryJs = async (hostFlag) => {
      try {
        await axios.get(`${host[hostFlag]}:${configJson["online-development-mode"].port}/${configJson["online-development-mode"].entry}`)
        this.tips = "功能正常，请打开线上地址调试"
        this.fontsClass = "normal"
      } catch (e) {
        if (hostFlag == 2) {
          this.fontsClass = "error"
          this.tips = "找不到入口文件，请检查online-development-mode下所有字段是否准确"
          return
        }
        hostFlag++
        getEntryJs(hostFlag)
      }
    }
    getEntryJs(hostFlag)

  },
  methods: {}
}
</script>

<style scoped lang="less">
.OnlineDevelopmentModeDetails {
  height: 100vh;
  background-color: #0a151f;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  .tips {
    font-size: 40px;

    .error {
      color: #ff3e00;
    }

    .warning {
      color: rgb(235, 194, 45);
    }

    .normal {
      color: #4bd964;
    }
  }

}
</style>